<template>
  <div class="comment">
    <header ref="hd">{{ count }}条点评</header>
    <div class="scroll-wrap">
      <scroller ref="scrollerEvent" class="comment-list" :probe-type="2">
        <div>
          <div ref="longCommentRef"><long-comment :id="id"></long-comment></div>
          <div><short-comment @unfold="unfoldsc" :id="id"></short-comment></div>
        </div>
      </scroller>
    </div>
    <div class="com-footer">
      <i class="icon iconfont icon-back" @click="back"></i>
      <i class="icon iconfont icon-bianxie" @click="writeComment">写评论</i>
    </div>
  </div>
</template>
<script>
import LongComment from 'components/longComment/longComment';
import shortComment from 'components/shortComment/shortComment';
import Scroller from 'components/scroller/scroller';
import { log } from 'util';

export default {
  data() {
    return {
      id: this.$route.params.id,
      count: this.$route.params.count
    };
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.$refs.scrollerEvent.refresh();
    }, 20);
  },
  methods: {
    // 短评论展开事件
    unfoldsc(show) {
      if (show) {
        //this.$refs.scrollerEvent.refresh();
        let longCommentH = this.$refs.longCommentRef.clientHeight;
        this.$refs.scrollerEvent.scrollTo(0, -longCommentH, 700, 'bounce');
      } else {
        this.$refs.scrollerEvent.scrollTo(0, 0, 700, 'bounce');
      }
    },
    // 返回资讯详情页
    back() {
      this.$router.go(-1);
    },
    // 进去写评论页面
    writeComment() {}
  },
  components: {
    LongComment,
    shortComment,
    Scroller
  }
};
</script>
<style lang="less" scoped>
.comment {
  header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #1ba3ea;
    color: #fff;
    text-align: center;
    font-size: 20px;
    letter-spacing: 2px;
    z-index: 9;
  }
  .scroll-wrap {
    position: absolute;
    width: 100%;
    top: 44px;
    left: 0;
    bottom: 40px;
    .comment-list {
      height: 100%;
    }
  }
  .com-footer {
    position: fixed;
    display: flex;
    width: 100%;
    height: 40px;
    bottom: 0;
    background: #3c3c3c;
    z-index: 9;
    .icon-back {
      flex: 0 0 50px;
      border-right: 1px solid #505050;
      color: #999999;
      font-size: 30px;
      text-align: center;
      line-height: 40px;
    }
    .icon-bianxie {
      flex: 1 1 auto;
      color: #d3d3d3;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>
